<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>我是父组件的标题</h1>
    <slot_comp>
        <p>父组件的初始内容</p>
        <p>父组件的初始内容</p>
        <p>父组件的初始内容</p>

    </slot_comp>
    <app_comp>
        <h1 slot="header">这里可能是一个标题</h1>
        <p>主要内容段落</p>
        <p>主要内容段落</p>
        <p slot="footer">这里有一些联系信息</p>
    </app_comp>

    <!--作用域插槽-->
    <!--父组件中，具有scope="props"属性的<template></template>元素必须存在,表示他是作用于插槽的模板-->
    <app_comp1>
        <span slot="slot1">3232323</span>
        <template slot="slot1" scope="temp_var">
            <span>3232323</span>
            <span>{{temp_var.text}}</span>
        </template>
    </app_comp1>

    <!--动态组件-->
    <keep-alive>
        <component :is="currentView"></component>
    </keep-alive>

    <!--子组件索引、-->
    <user-profile ref="profile"></user-profile>
    <user-profile ref="profile"></user-profile>
    <user-profile ref="profile"></user-profile>
</div>

<template id="slot_temp">
    <div>
        <h2>我是子组件的标题</h2>
        <slot>
            只有在没有内容的时候我才会出现
        </slot>
    </div>
</template>
<!--具名slot-->
<!--slot可以使用name 来配置如何分发内容，多个slot可以有不同的名字-->
<template id="app_layout">
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot name="footer"></slot>
        </main>
        <footer>
            <slot></slot>
        </footer>
    </div>
</template>

<!--作用域插槽-->
<template id="app_layout1">
    <div class="child">
        <slot name="slot1" text="hello form child"></slot>
    </div>
</template>


<script src="js/vue.js"></script>
<script>
    Vue.component('slot_comp', {
        template: '#slot_temp'
    })

    Vue.component('app_comp', {
        template: '#app_layout'
    })

    Vue.component('app_comp1', {
        template: '#app_layout1'
    })

    Vue.component('user-profile',{
        template:`
        <h2>标题1</h2>
        `
    })

    var vm = new Vue({
        el: '#app',
        data: {
            currentView: 'home'
        },
        components: {
            'home': {
                template: `<div>homejjjjj</div>`,
            },
            'posts': {
                template: `<div>posts</div>`,
            },
            'archive': {
                template: `<div>archive</div>`,
            },
        }
    })
    var child = vm.$refs.profile
    console.log(child);
</script>
</body>
</html>